<template>
    <div class="w-vw-100 h-vh-100 d-flex align-items-c justify-content-c flex-direction-c">
        <h1 class="m-top-20 m-bottom-20">{{title}}</h1>
        <el-form
            :model="registerForm"
            :rules="rules"
            label-position="top"
            class="demo-form-stacked"
            @submit.native.prevent="submitForm"
        >
            <el-form-item label="用户名" prop="username">
                <el-input v-model="registerForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="registerForm.password" autocomplete="new-password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="repassword">
                <el-input type="password" v-model="registerForm.repassword" autocomplete="new-password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" native-type="submit">注册</el-button>
            </el-form-item>
        </el-form>
        <div class="w-vw-100 d-flex align-items-c justify-content-c flex-gap-20">
            <el-link href="/login">已有账号? 去登录</el-link>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage, ElLink } from 'element-plus';
import {setSessionStorageValues} from "@/assets/js/common.js";

export default {
    components: {
        ElForm,
        ElFormItem,
        ElInput,
        ElButton,
        ElMessage,
        ElLink
    },
    data() {
        return {
            title: '开始注册吧',
            registerForm: {
                username: '',
                password: '',
                repassword: ''
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                repassword: [{ required: true, message: '两次密码必须相同', trigger: 'blur' }]
            }
        };
    },
    methods: {
        async submitForm() {
            try {
                // 发送注册请求
                const response = await axios.post('/api/register', this.registerForm);
                // 判断注册结果
                if (response.data.code === 200 && response.status === 200) {
                    this.$common.setSessionStorageValues('userLoginInfo', response.data.data);
                    this.$common.setSessionStorageValues('tokenData', {
                        token: response.headers.token,
                        refreshtoken: response.headers.refreshtoken,
                    });
                    ElMessage({
                        message: response.data.msg,
                        type: 'success',
                    })
                    this.$router.replace('/');
                } else {
                    ElMessage({
                        message: response.data.msg,
                        type: 'warning',
                    })
                }
            } catch (error) {
                // 发生错误
                ElMessage.error('注册出错啦')
                console.error(error);
                // 执行其他错误处理操作...
            }
        }
    }
};
</script>


<style scoped lang="scss">

</style>